import React, { Component } from 'react';

import {
  StyleSheet, Dimensions, TouchableOpacity, View, Text, UIManager,
} from 'react-native';
import {
  Icon, ActionSheet, Thumbnail,
} from 'native-base';
import ImagePicker from 'react-native-image-crop-picker';

const BUTTONS = ['相册选择', '相机拍摄', '取消'];
const DESTRUCTIVE_INDEX = 2;
const CANCEL_INDEX = 2;

const deviceWidth = Dimensions.get('window').width;

export default class FormTakePhoto extends Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }

  onChoiceClick = (index) => {
    switch (index) {
      case 1:
        ImagePicker.openCamera({
          width: 300,
          height: 400,
          cropping: false,
          compressImageQuality: 0.2,
        }).then(image => {
          this.props.addImage({ uri: image.path, type: 'multipart/form-data', name: `${new Date().getTime()}.png` });
        }).catch(e => console.log(e));
        break;
      case 0:
        ImagePicker.openPicker({
          width: 300,
          height: 400,
          cropping: false,
          compressImageQuality: 0.2,
        }).then(image => {
          this.props.addImage({ uri: image.path, type: 'multipart/form-data', name: `${new Date().getTime()}.png` });
        }).catch(e => console.log(e));
        break;
      default:
    }
  }

  render() {
    const { datas, delImage, showBigImage } = this.props;
    return (
      <View style={styles.container}>
        {datas && datas.length > 0 && (
          datas.map((data, index) => (
            <TouchableOpacity
              key={index}
              onPress={showBigImage}
              onLongPress={() => delImage(index)}
              style={styles.imageContent}
            >
              <Thumbnail
                // eslint-disable-next-line react/no-array-index-key
                square
                source={data}
                style={styles.image}
              />
            </TouchableOpacity>

          ))
        )}
        {datas && datas.length < 9 && (
          <TouchableOpacity
            style={styles.choiceBtn}
            onPress={() => {
              ActionSheet.show(
                {
                  options: BUTTONS,
                  cancelButtonIndex: CANCEL_INDEX,
                  destructiveButtonIndex: DESTRUCTIVE_INDEX,
                },
                buttonIndex => {
                  this.onChoiceClick(buttonIndex);
                },
              );
            }}
          >
            <Text>拍照/选择</Text>
          </TouchableOpacity>
        )}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    margin: 5,
  },
  imageContent: {
    width: '32%',
    marginBottom: 5,
    marginRight: '1.33%',
  },
  image: {
    width: '100%',
    height: (deviceWidth - 16) / 3,
  },
  choiceBtn: {
    width: '32%',
    marginRight: '1.33%',
    height: (deviceWidth - 16) / 3,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
  },
});
